<template>
  <a-modal title="备注" width="600px" :maskClosable="false" :visible="dialog" :confirm-loading="loading" @ok="handleSave" @cancel="cancelForm">
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <a-form-model-item label="订单号" prop="orderNo">
        <a-input v-model="ruleForm.orderNo" disabled placeholder="输入订单号" />
      </a-form-model-item>

      <a-form-model-item label="订单备注" prop="remark">
        <el-input v-model="ruleForm.remark" placeholder="输入订单备注" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  name: 'RemarkModal',
  data () {
    return {
      type: 1,
      title: '',
      start_page: 0,
      pages: 200,
      selectData: [], // 可选择上级菜单
      dialog: false,
      loading: false,
      ruleForm: {
        orderNo: '',
        remark: ''
      },
      rules: {
        remark: [
          { required: true, message: '订单备注', trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    edit (record) {
      this.dialog = true
      this.ruleForm.remark = ''
    },
    handleSave () {
      const self = this
      self.$confirm({
        title: '备注提示',
        content: '确定要备注吗？',
        onOk () {
          self.$refs.ruleForm.validate(valid => {
            if (valid) {
              self.loading = true
              const thisForm = Object.assign({}, self.ruleForm)

              postAction('/mallBase/omsOrder/orderRemark', thisForm).then(res => {
                self.$emit('ok')
                self.loading = false
                self.dialog = false
              }).catch(_ => {
                self.loading = false
              })
            } else {
              return
            }
          })
        },
        onCancel () { },
      })

    },
    cancelForm () {
      this.loading = false
      this.dialog = false
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
</style>
